<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>早晚的事er-后台首页</title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery-1.12.4.min.js"></script>
</head>

<body>
<div class="sider">
    <a href="#" class="logo"><img src="images/logo02.png" alt="logo"></a>
    <div class="user_info">
        <img src="images/2.jpg" alt="person">
        <span>欢迎&nbsp;&nbsp;<i>李思思</i></span>
        <b>管理员</b>
    </div>
    <div class="menu">
        <div class="level01 active"><a href="main_count.html" target="main_frame"><i
                class="iconfont icon-yidiandiantubiao04"></i><span>首页</span></a></div>
        <div class="level01"><a href="#"><i class="iconfont icon-icon-article"></i><span>文章管理</span><b
                class="iconfont icon-arrowdownl"></b></a></div>
        <ul class="level02">
            <li><a href="article_list.html" target="main_frame"><i
                    class="iconfont icon-previewright"></i><span>文章列表</span></a></li>
            <li><a href="article_release.html" target="main_frame"><i
                    class="iconfont icon-previewright"></i><span>发表文章</span></a></li>
            <li><a href="article_category.html" target="main_frame"><i class="iconfont icon-previewright"></i><span>文章类别管理</span></a>
            </li>
        </ul>

        <div class="level01"><a href="comment_list.html" target="main_frame"><i class="iconfont icon-comment"></i><span>评论管理</span></a>
        </div>
        <div class="level01"><a href="user.html" target="main_frame"><i class="iconfont icon-user"></i><span>个人中心</span></a>
        </div>
    </div>
</div>

<div class="header_bar">
    <form class="search_form">
        <input type="text" placeholder="请输入搜索内容">
        <i class="iconfont icon-search"></i>
    </form>
    <div class="user_center_link">
        <a href="user.html" onclick="setMenu(3,0)" target="main_frame">个人中心</a>
        <img src="images/2.jpg" alt="person">
        <a href="#"><i class="iconfont icon-tuichu"></i> 退出</a>
    </div>
</div>

<div class="main" id="main_body">
    <iframe src="main_count.html" frameborder="0" id="main_frame" name="main_frame" frameborder="0"
            scrolling="auto"></iframe>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">提示框</h4>
            </div>
            <div class="modal-body">
                你确定要退出吗?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">狠心关闭</button>
                <button type="button" class="btn btn-primary btn-leave">残忍确认</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="./js/bootstrap/js/bootstrap.min.js"></script>

<script>
  var $level01 = $('.level01')
  var $subli = $('.level02 li')
  $level01.click(function () {
    $level01.not($(this)).removeClass('active')
    $(this).addClass('active')

    if ($(this).next().hasClass('level02')) {
      $(this).next().slideToggle()
      $(this).find('b').toggleClass('rotate0')
    } else {
      $subli.removeClass('active')
    }
  })

  $subli.click(function () {
    $subli.not($(this)).removeClass('active')
    $(this).addClass('active')

    if (!$(this).parent().prev().hasClass('active')) {
      $level01.removeClass('active')
      $(this).parent().prev().addClass('active')
    }
  })

  function resizeFrame () {
    var frame_w = $('#main_body').outerWidth()
    var frame_h = $('#main_body').outerHeight()
    $('#main_frame').css({ 'width': frame_w, 'height': frame_h })
  }

  resizeFrame()

  $(window).resize(function () {
    resizeFrame()
  })

  function setMenu (m, n) {
    $level01.eq(m).addClass('active').siblings().not('.level02').removeClass('active')
    if (m != 1) {
      $('.level02').slideUp()
    } else {
      $('.level02').slideDown()
      $('.level02').children().eq(n).addClass('active').siblings().removeClass('active')
    }
  }

</script>

<!--自己的逻辑-->

<script>
  /*
  获取用户信息
  http://localhost:8000/admin/getuser
  步骤:
  1.进入到首页之后
  2.通过用户信息接口获取数据
  3.渲染到页面上

  用户退出
  http://localhost:8000/admin/logout
  步骤:
  1.退出按钮点击事件
  2.弹出bs模态框
    1.确认
        ajax
        数据回来之后返回登录页
    2.取消
   */

  $(function () {

    $('.icon-tuichu').parent().click(function () {
      $('#myModal').modal();
    })

    $('.btn-leave').click(function () {
        $.ajax({
          url:'http://localhost:8000/admin/logout',
          type:'post',
          success:function (backData) {
            console.log(backData)
            if(backData.code === 200){
              window.location.href = './login.html';
            }
          }
        })
    })













    $.ajax({
      url: ' http://localhost:8000/admin/getuser',
      success:function (backData) {
        console.log(backData)

        $('.user_info img').attr('src',backData.data.user_pic)
        $('.user_info i').html(backData.data.nickname)
        $('.user_center_link img').attr('src',backData.data.user_pic)
      }
    })
  })
</script>













